<template>
  <div class='container'>

    <el-card>
      <div class="page-tools ">
        <!-- 左侧 -->
        <div class="left" >
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="formInline.user" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
          <el-button @click="cleanClick">清除</el-button>
          <el-button type="primary" @click="searchClick ">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="right" style="margin-top: -20px">
        <!-- 右侧 -->
        <el-button v-if="subject.id && subject.name" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
        <el-button  type="success" icon="el-icon-edit" @click="clickShowAdd" >新增目录</el-button>
      </div>

    </div>
    <!-- 下面 -->
    <el-alert
        type="info"
        show-icon>
        共 {{ total }} 条记录
      </el-alert>
    </el-card>

   <!-- 员工表格 -->
    <el-card style="margin-top: 20px" :data="list">
      <el-table v-loading="loading" :data="list" border stripe>
      <el-table-column label="序号" type="index"   width="100" />
      <el-table-column label="所属学科" prop="subjectName"     />
      <el-table-column label="目录名称" prop="directoryName"     />
      <el-table-column label="创建者"    prop="username"  />
      <el-table-column label="面试数量"   prop="totals"  />
      <el-table-column label="创建日期"    prop="addDate">
        <template #default="{row}">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>

         <el-table-column label="状态">
          <template slot-scope="scope">{{scope.row.state===1?'已启用':'已禁用'}}</template>
         </el-table-column>
      <el-table-column label="操作"  fixed="right" width="280" >

        <template slot-scope="scope">
              <!-- {{ scope.row }} -->
          <el-button type="text" size="small" @click="henderChengeState(scope.row)" >{{ !scope.row.state ? '禁用' : '启用' }} </el-button>
          <el-button type="text" size="small"  ></el-button>
          <el-button type="text" size="small" :disabled="Boolean(scope.row.state)" @click="clickShowAdd(scope.row)">修改</el-button>
           <el-button type="text" :disabled="(!!scope.row.state)" size="small" @click="delCatalog(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

        <!-- 分页组件 -->
        <el-pagination
          class="pagination"

          style="margin-top:20px"
          background
          :current-page="page"
          :page-sizes="[10, 20,30]"
          :page-size="size"
          @size-change ="sizechange"
          @current-change="pagechange"
          layout="  prev, pager, next, sizes,jumper"
          :total="total"
        />

      <!-- 弹出框 -->
      <directorys-add ref="add" :list="subList" :row='form' @formClick="formClick" @subjectsList='getCatalog'/>

      </el-card>
  </div>
</template>

<script>
// simple
import { list, remove, add, changeState } from '../../api/hmmm/directorys'
import { list as subjectsList } from '../../api/hmmm/subjects'
import DirectorysAdd from '../components/directorys-add'
export default {
  name: 'container',
  components: {
    DirectorysAdd
  },
  data () {
    return {

      items: [ // 新增按钮
        { type: 'success', label: '新增目录', svg: 'el-icon-edit' }
      ],
      formInline: {
        user: '',
        region: ''
      },
      subjectID: '',
      page: 1, // 页码
      size: 10,
      list: [], // 学科列表
      total: 0, // 总数
      loading: false,
      disabshow: true,
      subList: [], // 学科列表
      subPage: {
        page: 1,
        pagesize: 100,
        subjectName: ''
      },
      form: { }
    }
  },
  computed: {
    subject () {
      return this.$route.query || {}
    }
  },
  created () {
    // 排队执行 其中一个报错 后面不执行
    Promise.all([this.getCatalog(), this.subjectsList()])
  },
  methods: {
    // 学科列表
    async subjectsList () {
      const { page, pagesize, subjectName } = this.subPage
      const {
        data: {
          items: subList = []
        }
      } = await subjectsList({
        page, pagesize, subjectName
      })

      this.subList = subList
    },

    //  封装添加请求
    async add ({ subjectID, directoryName }) {
      await add({
        subjectID,
        directoryName
      })
    },
    //  封装新增请求
    async update ({ id, subjectID, directoryName }) {
      await add({
        id,
        subjectID,
        directoryName
      })
    },

    // 状态点击事件
    henderChengeState ({ id, state }) {
      this.clickChangeState(id, !state ? 1 : 0)
    },

    // 状态接口请求
    async clickChangeState (id, state) {
      const res = await changeState({ id, state })
      console.log(res)
      this.getCatalog()
    },

    // 显示弹框
    clickShowAdd (row) {
      this.form = row
      this.$refs.add.showDialog = true
    },

    // 新增弹框确认按钮
    async formClick (row) {
      const {
        subjectID,
        directoryName
      } = row
      await this.add({ subjectID, directoryName })
      await this.getCatalog()
    },

    // 点击搜索
    async searchClick () {
      // if( )
      await this.getCatalog()
    },
    // 点击清除
    cleanClick () {
      this.formInline.user = ''
      this.formInline.region = ''
      this.getCatalog()
    },
    // 使用表单
    onSubmit () {
      console.log('submit!')
    },
    // 更新当前页
    pagechange (e) {
      this.page = e
      this.getCatalog()
    },
    // 更新每页条数size
    sizechange (e) {
      this.size = e
      console.log(e)
      this.getCatalog()
    },

    // 获取目录数据 getCatalog
    async getCatalog () {
      const {
        page, size: pagesize, formInline: {
          user: directoryName = '',
          region: state = ''
        },
        subjectID
      } = this

      const data = this.getPromiseEntries({
        page,
        pagesize,
        directoryName,
        subjectID,
        state
      })

      const { data: { items, counts } } = await
      list(data)
      this.list = items
      this.total = counts
    },

    // 封装好的参数序列化 判断参数是否有值
    getPromiseEntries (data = {}) {
      return Object.entries(data).reduce((acc, [key, val]) => ({ ...acc, ...((val === 0 || val) && { [key]: val }) }), {})
    },

    // 删除目录
    delCatalog (id) {
      // console.log(id)
      // 1. 确认消息提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2. 发送请求
        const { config: { data } } = await remove(id)
        console.log(data)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 4. 重新渲染
        this.getCatalog()
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.pagination{
  text-align: right;
}
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subjectName{

  width:100%
}
.goBack{
  display: flex;
}

</style>
